<template>
	<div class="system-user-container">
    <el-row >
        <el-card shadow="hover" style="width: 100%">
          <div class="system-user-search mb15">
            <el-button size="default" type="primary" class="ml10" @click="msgList('0,1')">
              <el-icon><ele-Search /></el-icon>全部</el-button>
            <el-button size="default" @click="msgList('0')">
              <el-icon><ele-Refresh /></el-icon>未读[<span style="color: crimson">{{unread}}</span>]</el-button>
            <el-button size="default" type="success" class="ml10" @click="msgList('1')">
              <el-icon><ele-FolderAdd /></el-icon>已读</el-button>
            <el-button size="default" type="success" class="ml10" @click="setRead('All')">
              <el-icon><ele-FolderAdd /></el-icon>全部标记已读</el-button>
          </div>
          <vxe-table
              border :row-config="{height: 80}"
              :data="tableData.data">
            <vxe-column type="seq" width="60" align="center"></vxe-column>
            <vxe-column field="msgStatus" title="状态" width="60" :formatter="formatterNum"  align="center"></vxe-column>
            <vxe-column field="msgTitle" title="标题"  width="180"  ></vxe-column>
            <vxe-column field="msgContent" title="内容"  ></vxe-column>
            <vxe-column field="sendTime" title="发送时间" width="160" align="center" ></vxe-column>
            <vxe-column field="msgSender" title="发送人" width="80" align="center" ></vxe-column>
            <vxe-column  title="操作" width="100" align="center"  >
              <template #default="{row}">
<!--                <el-button size="small" @click="view(row)">查看</el-button><br><br>-->
                <el-button v-if="row.msgStatus===0" size="small" @click="setRead(row.messageID)">标记已读</el-button>
                <!--                <el-button size="small" @click="onRowDel(scope.row)">删除</el-button>-->
              </template>
            </vxe-column>
          </vxe-table>
          <vxe-pager
              background
              v-model:current-page="tableData.param.pageNum"
              v-model:page-size="tableData.param.pageSize"
              :total="tableData.total"
              :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']" @page-change="onHandleCurrentChange">
          </vxe-pager>
        </el-card>
    </el-row>
	</div>
</template>
<style>

</style>
<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
import {ElMessageBox, ElMessage, ElTree,FormInstance} from 'element-plus';
import { Search } from '@element-plus/icons-vue'
import EditUser from '/@/views/system/user/component/editUser.vue';
import ExtendUser from '/@/views/system/user/component/extendUser.vue';
import {messageList, msgupstatus} from "/@/api/linkoo/message";


export default defineComponent({
	name: 'systemUser',
	components: { EditUser,ExtendUser },
	setup() {
    const {proxy} = <any>getCurrentInstance();
		const editUserRef = ref();
		const state = reactive({
      ids:[],
      unread:0,
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
          pageNum: 1,
          pageSize: 10,
          status:''
				}
				}
			});
		// 初始化表格数据
		const initTableData = () => {
     msgList('0,1');
		};
    const msgList = (status:any)=>{
      if (status.length>0){
        state.tableData.param.status=status
      }
      messageList(state.tableData.param).then((res:any)=>{
        state.tableData.data = res.data.list??[];
        state.tableData.total = res.data.total;
        state.unread = res.data.unRead;
      });
    };
		// 打开新增用户弹窗
		const setRead = (ids:any) => {
      msgupstatus(ids).then(res=>{
        msgList('')
      })
		};
		// 打开新增用户弹窗
		const onOpenAddUser = () => {
      editUserRef.value.openDialog();
		};
		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.tableData.param.pageSize = val;
      msgList('')
		};
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.tableData.param.pageNum = val;
      msgList('')
		};
		//
    const formatterNum = ({ cellValue}) => {
      return cellValue===0?'未读':'已读'
    }
		// 页面加载时
		onMounted(() => {
			initTableData();
		});

    // 多选框选中数据

		return {

			editUserRef,

			onOpenAddUser,
      setRead,
			onHandleSizeChange,
			onHandleCurrentChange,
      formatterNum,

      msgList,

			...toRefs(state),
		};
	},
});
</script>
